<template>
    <div class="the_tray">
        <ul class="message">
            <li>姓名：{{name}}</li>
            <li>出生地：{{add}}</li>
            <li>公历：{{item.birthday}}</li>
            <li>农历：{{item.lunardate}}</li>
            <li>三个数字：{{threeNumber}}</li>
        </ul>
        <div class="dish">
            <span class="dish_tit">{{item.sex}}:</span>
            <table class="dish_table" border="1">
                <tr class="trred">
                    <td v-for="(item, key) in item.gan" :key="key" class="kuan" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
                <tr class="trred">
                    <td v-for="(item, key) in item.zhi" :key="key" class="kuan" :class="'td' + (key + 1)">{{item}}</td>
                </tr>
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">藏干:</span>
            <table class="dish_table" border="1">
                <tr>
                    <td v-for="(item, key) in item.canggan" :key="key" class="kuan" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">纳音:</span>
            <table class="dish_table" border="1">
                <tr>
                    <td v-for="(item, key) in item.nayin" :key="key" class="kuan" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">十神:</span>
            <table class="dish_table" border="1">
                <tr>
                    <td v-for="(item, key) in item.shishen" :key="key" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">大运:</span>
            <table class="dish_table" border="1">
                <tr v-for="(ite, ke) in dayun" :key="ke" class="trred">
                    <td v-for="(item, key) in ite" :key="key" :class="'td' + ke">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">始于:</span>
            <table class="dish_table" border="1">
                <tr v-for="(ite, ke) in shiyu" :key="ke">
                    <td v-for="(item, key) in ite" :key="key" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">流年:</span>
            <table class="dish_table" border="1">
                <tr v-for="(ite, ke) in liunian" :key="ke">
                    <td v-for="(item, key) in ite" :key="key" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
        <div class="dish">
            <span class="dish_tit">止于:</span>
            <table class="dish_table" border="1">
                <tr v-for="(ite, ke) in zhiyu" :key="ke">
                    <td v-for="(item, key) in ite" :key="key" :class="'td' + (key + 1)">{{item}}</td>
                </tr> 
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'theTray',
        props: {
            item: Object,
            name: String,
            add: String,
            threeNumber: String,
        },
        data() {
            return {
                dayun: [],
                shiyu: [],
                liunian: [],
                zhiyu: [],
            }
        },
        created() {
            setTimeout(() => {
                this.dayun = this.item.dayun.slice(0, 2);
                this.shiyu = this.item.dayun.slice(2, 3);
                this.liunian = this.item.dayun.slice(3,13);
                this.zhiyu = this.item.dayun.slice(13);
            },300)
            
        },
        methods: {

        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .the_tray{
        overflow-y: scroll;
        z-index: 2;
        .message{
            li{
                .lh(45);
            }
        }
        .dish{
            display: flex;
            .mt(30);
            .dish_tit{
                .w(65);
                .lh(50);
            }
            .dish_table{
                flex: 1;
                border: none;
                tr{
                    display: flex;
                    flex-wrap: wrap;
                    td{
                        .w(73);
                        .h(50);
                        .lh(50);
                        text-align: center;
                        border-left: 0;
                        border-top: 0;
                        border-color: #999;
                        border-top: 1px solid #999;
                        &:nth-child(8n+1) {
                            border-left: 1px solid #999;
                        } 
                    }
                    .td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8{
                        border-top: 1px solid #999;
                    }
                    .kuan{
                        .w(95);
                    }
                }
                .trred{
                    td{
                        color: red;
                    }
                    .td1{
                        color: #333;
                    }
                }
            }
        }
    }
</style>
